<template>
<!-- 主页 -->
  <div class="fa home">
    <div class="top container">
      <img src="../assets/img/logo.gif" alt="" />
      <div class="box">
        <div>
          <router-link to="/search" tag="input"
            type="search"
            class="inp1"
            placeholder="输入菜名、食材、作者"
             
          />
          <router-link to="/search" tag="input" type="submit" class="inp2 fa" value=""  />
        </div>
      </div>
    </div>

    <div class="rotationMap container" >
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="#007aff"
        @change="onChange"
      >
        <van-swipe-item v-for="(item, index) in imgs" :key="index"
          ><img :src="item.imgurl" alt=""
        /></van-swipe-item>
        <!-- <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
          <van-swipe-item>5</van-swipe-item>
          <van-swipe-item>6</van-swipe-item> -->
        <template #indicator>
          <ol class="custom-indicator">
            <li class="con"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        </template>
      </van-swipe>
    </div>

    <div class="tab container">
      <div
        v-for="(item, index) in tabitem"
        :key="index"
        @click="datapass(item.content)"
        class="item"
      >
        <div>
          <a :id="item.id"></a>
        </div>
        <p>{{ item.content }}</p>
      </div>
    </div>

    <div class="list container">
      <h2>{{ toptitle }}推荐</h2>
      <ul>
        <li
          id="breakfast"
          :class="{ con: indexs == 0 ? true : false }"
          @click="breakfasts"
        >
           早餐
        </li>
        <li
          id="lunch"
          :class="{ con: indexs == 1 ? true : false }"
          @click="lunchs"
        >
           午餐
        </li>
        <li
          id="dinner"
          :class="{ con: indexs == 2 ? true : false }"
          @click="dinner"
        >
           晚餐
        </li>
        <li
          id="snack"
          :class="{ con: indexs == 3 ? true : false }"
          @click="snack"
        >
           夜宵
        </li>
      </ul>
      <!-- <div class="list-box">
            <div class="box-fl">
                <img src="../assets/img/cover_ef60bacdb5071ad1.jpg" alt="">
                <p>老少皆宜的红烧武昌鱼味道香美</p>
            </div>
            <div class="box-fr">
                <img src="../assets/img/cover_0825d93e34f8f021.jpg" alt="">
                <p>肉质滑嫩的家常水煮鱼</p>
            </div>
        </div> -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            style="width: 177.5px; margin-right: 30px"
            v-for="(item, index) in datalist"
            :key="index"
            @click="content(index)"
          >
            <img :src="item.imgurl" alt="" />
            <p>{{ item.title }}</p>
          </div>
          <!-- <div class="swiper-slide ">
                    <img src="../assets/img/w2.jpg" alt="">
                    <p>肉质滑嫩的家常水煮鱼</p>
                </div>
                <div class="swiper-slide ">
                    <img src="../assets/img/w1.jpg" alt="">
                    <p>老少皆宜的红烧武昌鱼味道香美</p>
                </div>
                <div class="swiper-slide ">
                    <img src="../assets/img/w2.jpg" alt="">
                    <p>肉质滑嫩的家常水煮鱼</p>
                </div>
                <div class="swiper-slide ">
                    <img src="../assets/img/w1.jpg" alt="">
                    <p>老少皆宜的红烧武昌鱼味道香美</p>
                </div> -->
        </div>
      </div>
    </div>

    <div class="list container list2">
      <h2>大家都在看</h2>
      <ul>
        <li id="breakfast" :class="{ con: every == 0 }" @click="every1">
           推荐
        </li>
        <li id="lunch" :class="{ con: every == 1 }" @click="every2"> 食肉</li>
        <li id="dinner" :class="{ con: every == 2 }" @click="every3"> 素食</li>
        <li id="snack" :class="{ con: every == 3 }" @click="every4"> 资讯</li>
      </ul>
      <div :class="['list-box', { disply: every == 3 }]">
        <div class="box-fl1" v-for="(item, index) in recommend" :key="index">
          <img :src="item.imgurl" alt="" />
          <p>{{ item.title }}</p>
        </div>
      </div>
      <div :class="['list-snack', { disply: every == 3 ? false : true }]">
        <div
          class="list-snack-item"
          v-for="(item, index) in snackli"
          :key="index"
        >
          <img :src="item.imgurl" alt="" />
          <ul>
            <li v-for="(item, index) in snackli[index].item" :key="index">
              <router-link tag="a" to="/snack" href="">{{ item }}</router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="bottom container">
        <ul>
            <li class="con">
            <router-link tag="a" to="/home">
                <span id="bottom-home"></span>
                <p>首页</p>
            </router-link>
            </li>
            <li>
            <router-link tag="a" to="/init">
                <span id="bottom-top"></span>
                <p>排行</p>
            </router-link>
            </li>
            <li>
            <router-link tag="a" to="/classify">
                <span id="bottom-list"></span>
                <p>分类</p>
            </router-link>
            </li>
            <li  >
                <router-link tag="a" to="/info"  >
                <span id="bottom-recipe"></span>
                <p>资讯</p>
                </router-link>
            </li>
            <li>
            <router-link tag="a" to="/my">
                <span id="bottom-user"></span>
                <p>我的</p>
            </router-link>
            </li>
        </ul>
      </div>
      
  </div>
</template>

<script>
import { gethomedata } from "../api/home.js";
import Swiper from "Swiper";
export default {
  data() {
    return {
      imgs: null,
      data: null,
      datalist: null,
      indexs: 0,
      toptitle: "早餐",
      recommend: null,
      every: 0,
      tabitem: null,
      snackli: null,
      valueitem:null,
    };
  },
  created() {//请求数据
    gethomedata().then(data => {
      console.log(data);
      this.imgs = data.data;
      this.data = data;
      this.datalist = data.breakfast;
      this.recommend = data.recommend;
      this.tabitem = data.tabitem;
      this.snackli = data.snackli;
      console.log(this.imgs[0].imgurl);
      console.log(this.snackli);

    });
  },
  mounted() {//轮播图内容
    new Swiper(".swiper-container", {
      slidesPerView: "auto",
      spaceBetween: 20,
      observer: true, //自动初始化swiper对象
      observeParents: true, //自动初始化父节点swiper对象
    });
   
  },
  methods: {
    // 点击效果
    onChange(index) {
      let ols = document.getElementsByClassName("custom-indicator")[0];
      let lis = ols.children;
      if (index == 5) {
        lis[index - 1].className = "";
        lis[index].className = "con";
        lis[0].className = "";
      } else if (index != 0) {
        lis[index].className = "con";
        lis[index - 1].className = "";
        lis[index + 1].className = "";
      } else {
        lis[index + 1].className = "";
        lis[index].className = "con";
        lis[5].className = "";
      }
      //   console.log(index);
    },
    breakfasts() {
      this.indexs = 0;
      this.datalist = this.data.breakfast;
      this.toptitle = "早餐";
    },
    lunchs() {
      this.indexs = 1;
      this.datalist = this.data.lunch;
      this.toptitle = "午餐";
    },
    dinner() {
      this.indexs = 2;
      this.datalist = this.data.supper;
      this.toptitle = "晚餐";
    },
    snack() {
      this.indexs = 3;
      this.datalist = this.data.supperto;
      this.toptitle = "夜宵";
    },
    every1() {
      this.every = 0;
      this.recommend = this.data.recommend;
    },
    every2() {
      this.every = 1;
      this.recommend = this.data.recommendtwo;
    },
    every3() {
      this.every = 2;
      this.recommend = this.data.recommendthree;
    },
    every4() {
      this.every = 3;
      this.recommend = this.data.recommendfour;
    },
    // 跳转分类详情页面
    datapass(item) {
      // console.log(item);
      this.$router.push({ path: "small", query: { item } });
      window.scrollTo(0, 0);
    },
    // 跳转详情页面
    content(index) {
      // this.$emit('listsadd',this.datalist);
      // console.log(this.datalist);
      let item = this.datalist;
      console.log(item);
      this.$router.push({ path: "specifics", query: { index, item } });
      window.scrollTo(0, 0);
    },
    // 搜索页面
    search(){
      this.$router.push({path: "search"});
    },
  },
};
</script>

<style lang="scss" >
@import "../assets/css/init.css";
.home {
  background-color: #fff;
}
.my-swipe .van-swipe-item {
  width: 100%;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  vertical-align: middle;
}
.custom-indicator {
  width: 100%;
  height: 24px;
  position: absolute;
  bottom: 17px;
  display: flex;
  justify-content: center;
}
.custom-indicator li {
  width: 8px;
  height: 8px;
  margin: 0 4px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}
.swiper-container .swiper-wrapper .swiper-slide p {
  width: 177.5px;
  margin-right: 20px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swiper-container .swiper-wrapper .swiper-slide img {
  border-radius: 10px;
}
.jz{
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 50%;
  img{
    width: 50px;
    height: 50px;
  }
}
</style>
